<template>
  <a-card :bordered="false" :bodyStyle="{ minHeight: `${layoutContentHeight - pageHeaderHeight}px` }">
    <div>
      <span>{{ $t('platformManagement.log.operationUser') }}：</span>
      <a-input allowClear style="width: 200px" class="search-btn" v-model.trim="queryParams.operUser" />
      <span>{{ $t('platformManagement.log.operationObj') }}：</span>
      <a-input allowClear style="width: 200px" class="search-btn" v-model.trim="queryParams.operTitle" />
      <span>{{ $t('platformManagement.log.executionTime') }}：</span>
      <a-date-picker show-time :value="selectdate" class="search-btn" @change="onChange" />
      <a-button class="search-btn" type="primary" icon="search" @click="$refs.table.refresh(true)">{{
        $t('common.query')
      }}</a-button>
      <a-button class="search-btn" icon="reload" @click="resetQuery">{{ $t('common.reset') }}</a-button>
    </div>
    <s-table
      ref="table"
      size="default"
      rowKey="id"
      :columns="columns"
      :scroll="{ x: tableWidth }"
      :data="loadData"
      :showPagination="true"
    >
      <span slot="index" slot-scope="text, record, index">
        {{ index + 1 }}
      </span>
      <span slot="businessType" slot-scope="text">
        {{ BUSINESSTYPEENUM[text] }}
      </span>
      <span slot="modifyDate" slot-scope="text, record">
        {{ record.modifyDate | moment }}
      </span>
      <span slot="jsonResult" slot-scope="text, record">
        <a href="javascript:;" @click="viewContent(record)">{{ $t('common.view') }}</a>
      </span>
    </s-table>

    <a-modal v-model="visible" :width="1200" :title="$t('platformManagement.log.logDetail')" :footer="null">
      <div class="jsonTitle">{{ $t('platformManagement.log.operParam') }}</div>
      <codemirror v-model="selectRecord.operParam" :options="cmOption" style="width: 100%" />
      <div class="jsonTitle">{{ $t('platformManagement.log.jsonResult') }}</div>
      <codemirror v-model="selectRecord.jsonResult" :options="cmOption" style="width: 100%" />
    </a-modal>
  </a-card>
</template>

<script>
import { layoutMixin } from '@/utils/mixin';
import { STable } from '@/components';
import { getSysOperLogList } from '@/api/platformManagement/SysOperLogController';
import { getQueryParams } from '@/utils/util';
import moment from 'moment';
import { codemirror } from 'vue-codemirror';
// base style
import 'codemirror/lib/codemirror.css';
// theme css
// import 'codemirror/theme/base16-dark.css'
import 'codemirror/theme/rubyblue.css';
// language
import 'codemirror/mode/javascript/javascript.js';
// active-line.js
import 'codemirror/addon/selection/active-line.js';
// styleSelectedText
import 'codemirror/addon/selection/mark-selection.js';
import 'codemirror/addon/search/searchcursor.js';
// highlightSelectionMatches
import 'codemirror/addon/scroll/annotatescrollbar.js';
import 'codemirror/addon/search/matchesonscrollbar.js';
import 'codemirror/addon/search/match-highlighter.js';
// keyMap
import 'codemirror/mode/clike/clike.js';
import 'codemirror/addon/edit/matchbrackets.js';
import 'codemirror/addon/comment/comment.js';
import 'codemirror/addon/dialog/dialog.js';
import 'codemirror/addon/dialog/dialog.css';
import 'codemirror/addon/search/search.js';
import 'codemirror/keymap/sublime.js';
// foldGutter
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/brace-fold.js';
import 'codemirror/addon/fold/comment-fold.js';
import 'codemirror/addon/fold/foldcode.js';
import 'codemirror/addon/fold/foldgutter.js';
import 'codemirror/addon/fold/indent-fold.js';
import 'codemirror/addon/fold/markdown-fold.js';
import 'codemirror/addon/fold/xml-fold.js';

const initialqueryParams = {
  operUser: '',
  operTitle: '',
  operTime: ''
};

const BUSINESSTYPEENUM = ['其它', '新增', '修改', '删除', '授权', '导出', '导入', '强退', '生成代码', '清空'];

export default {
  name: 'SysOperationLog',
  mixins: [layoutMixin],
  components: {
    codemirror,
    STable
  },
  data() {
    return {
      initFlag: true,
      pageParams: {},
      queryParams: { ...initialqueryParams },
      BUSINESSTYPEENUM,
      selectdate: null,
      // 加载数据方法 必须为 Promise 对象
      loadData: params => {
        this.loading = true;
        const req = {
          pageNo: this.initFlag ? this.pageParams.pageNo || 1 : params.pageNo,
          pageSize: this.initFlag ? this.pageParams.pageSize || 10 : params.pageSize,
          ...this.queryParams
        };

        return getSysOperLogList(req)
          .then(res => {
            this.$router.push({
              ...this.$route,
              query: {
                ...params,
                ...getQueryParams(this.queryParams)
              }
            });
            this.initFlag = false;
            return res.data;
          })
          .finally(() => {
            this.loading = false;
          });
      },
      loading: true,
      visible: false,
      selectRecord: {
        operParam: '{"pageSize":["10"],"page":["1"]}',
        jsonResult:
          '{\n  "code" : "sso.ok",\n  "data" : {\n    "pageSize" : 10,\n    "pageNo" : 1,\n    "totalCount" : 7,\n    "totalPage" : 1,\n    "data" : [ {\n      "id" : 1,\n      "appId" : 0,\n      "title" : "测试日志记录",\n      "businessType" : 0,\n      "method" : "com.harmontronics.mos.model.sso.controller.SysOperLogController.testLog()",\n      "requestMethod" : "GET",\n      "operatorType" : 1,\n      "operName" : "内部调用",\n      "operUrl" : "/api/sys-oper-log/list-test",\n      "operIp" : "127.0.0.1",\n      "operLocation" : "内网IP",\n      "operParam" : "{\\"pageSize\\":[\\"10\\"],\\"page\\":[\\"1\\"]}",\n      "jsonResult" : "{\\n  \\"code\\" : \\"sso.ok\\",\\n  \\"data\\" : {\\n    \\"pageSize\\" : 10,\\n    \\"pageNo\\" : 1,\\n    \\"totalCount\\" : 0,\\n    \\"totalPage\\" : 0,\\n    \\"data\\" : [ ]\\n  },\\n  \\"message\\" : \\"操作成功\\"\\n}",\n      "status" : 0,\n      "errorMsg" : null,\n      "operTime" : null,\n      "createBy" : null,\n      "createDate" : {\n        "year" : 2021,\n        "month" : "JUNE",\n        "nano" : 783000000,\n        "monthValue" : 6,\n        "dayOfMonth" : 22,\n        "hour" : 14,\n        "minute" : 51,\n        "second" : 54,\n        "dayOfWeek" : "TUESDAY",\n        "dayOfYear" : 173,\n        "chronology" : {\n          "id" : "ISO",\n          "calendarType" : "iso8601"\n        }\n      },\n      "modifyBy" : null,\n      "modifyDate" : {\n        "year" : 2021,\n        "month" : "JUNE",\n        "nano" : 783000000,\n        "monthValue" : 6,\n        "dayOfMonth" : 22,\n        "hour" : 14,\n        "minute" : 51,\n        "second" : 54,\n        "dayOfWeek" : "TUESDAY",\n        "dayOfYear" : 173,\n        "chronology" : {\n          "id" : "ISO",\n          "calendarType" : "iso8601"\n        }\n      }\n    }, {\n      "id" : 2,\n      "appId" : 0,\n      "title" : "测试日志记录",\n      "businessType" : 0,\n      "method" : "com.harmontronics.mos.model.sso.controller.SysOperLogController.testLog()",\n      "requestMethod" : "GET",\n      "operatorType" : 1,\n      "operName" : "内部调用",\n      "operUrl" : "/api/sys-oper-log/list-test",\n      "operIp" : "127.0.0.1",\n      "operLocation" : "内网IP",\n      "operParam" : "{\\"pageSize\\":[\\"10\\"],\\"page\\":[\\"1\\"]}",\n      "jsonResult" : "{\\n  \\"code\\" : \\"sso.ok\\",\\n  \\"data\\" : {\\n    \\"pageSize\\" : 10,\\n    \\"pageNo\\" : 1,\\n    \\"totalCount\\" : 1,\\n    \\"totalPage\\" : 1,\\n    \\"data\\" : [ {\\n      \\"id\\" : 1,\\n      \\"appId\\" : 0,\\n      \\"title\\" : \\"测试日志记录\\",\\n      \\"businessType\\" : 0,\\n      \\"method\\" : \\"com.harmontronics.mos.model.sso.controller.SysOperLogController.testLog()\\",\\n      \\"requestMethod\\" : \\"GET\\",\\n      \\"operatorType\\" : 1,\\n      \\"operName\\" : \\"内部调用\\",\\n      \\"operUrl\\" : \\"/api/sys-oper-log/list-test\\",\\n      \\"operIp\\" : \\"127.0.0.1\\",\\n      \\"operLocation\\" : \\"内网IP\\",\\n      \\"operParam\\" : \\"{\\\\\\"pageSize\\\\\\":[\\\\\\"10\\\\\\"],\\\\\\"page\\\\\\":[\\\\\\"1\\\\\\"]}\\",\\n      \\"jsonResult\\" : \\"{\\\\n  \\\\\\"code\\\\\\" : \\\\\\"sso.ok\\\\\\",\\\\n  \\\\\\"data\\\\\\" : {\\\\n    \\\\\\"pageSize\\\\\\" : 10,\\\\n    \\\\\\"pageNo\\\\\\" : 1,\\\\n    \\\\\\"totalCount\\\\\\" : 0,\\\\n    \\\\\\"totalP'
      },
      cmOption: {
        tabSize: 4,
        foldGutter: true,
        styleActiveLine: true,
        lineNumbers: true,
        lineWrapping: true,
        line: true,
        keyMap: 'sublime',
        mode: 'application/json',
        theme: 'rubyblue',
        extraKeys: {
          F11(cm) {
            cm.setOption('fullScreen', !cm.getOption('fullScreen'));
          },
          Esc(cm) {
            if (cm.getOption('fullScreen')) cm.setOption('fullScreen', false);
          }
        },

        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers']
      }
    };
  },
  filters: {},
  computed: {
    columns() {
      return [
        {
          title: this.$t('common.index'),
          dataIndex: 'index',
          fixed: 'left',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'index' }
        },
        {
          title: this.$t('platformManagement.log.operationUser'),
          dataIndex: 'operName',
          ellipsis: true,
          width: 150
        },
        {
          title: this.$t('platformManagement.log.operationObj'),
          dataIndex: 'title',
          ellipsis: true,
          width: 150
        },
        {
          title: this.$t('platformManagement.log.businessType'),
          dataIndex: 'businessType',
          ellipsis: true,
          width: 120,
          scopedSlots: { customRender: 'businessType' }
        },
        {
          title: 'IP',
          dataIndex: 'operIp',
          ellipsis: true,
          width: 150
        },
        {
          title: this.$t('platformManagement.log.appName'),
          dataIndex: 'appName',
          ellipsis: true,
          width: 150
        },
        {
          title: this.$t('platformManagement.log.APIRoute'),
          dataIndex: 'operUrl',
          ellipsis: true,
          width: 220
        },
        {
          title: this.$t('platformManagement.log.executionTime'),
          dataIndex: 'operTime',
          ellipsis: true,
          width: 200
        },
        {
          title: this.$t('common.modifyTime'),
          dataIndex: 'modifyDate',
          width: 200,
          scopedSlots: { customRender: 'modifyDate' }
        },
        {
          title: this.$t('platformManagement.log.operationContent'),
          dataIndex: 'jsonResult',
          width: 100,
          scopedSlots: { customRender: 'jsonResult' }
        }
      ];
    },

    tableWidth() {
      const width = this.columns.reduce((last, next) => {
        last += next.width;
        return last;
      }, 0);
      return width;
    }
  },
  created() {
    const { pageNo, pageSize } = this.$route.query;
    this.pageParams = {
      pageNo,
      pageSize
    };
  },
  methods: {
    resetQuery() {
      this.queryParams = { ...initialqueryParams };
      this.selectdate = null;
      this.$refs.table.refresh(true);
    },
    viewContent(record) {
      this.visible = true;
      this.selectRecord.operParam = record.operParam;
      this.selectRecord.jsonResult = record.jsonResult;
    },
    onChange(value, dateString) {
      this.queryParams.operTime = dateString;
      this.selectdate = value;
    }
  }
};
</script>

<style lang="less" scoped>
.jsonTitle {
  text-align: center;
  margin: 8px 0;
}
</style>
